<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../css/icons-extra.css" rel="stylesheet"/>
    <link href="../css/index.css" rel="stylesheet"/>
   	<link href="../css/bigpic.css" rel="stylesheet"/>
</head>
<body>
	<header id="js-header-bar" class="main-topbar mui-bar mui-bar-nav">
		<div id="js-address-selector" class="main-top-address mui-row">
			<div class="mui-col-xs-3">
				<span class="mui-icon mui-icon-location mui-pull-left"></span>
				<button id="js-btn-address-set" class="address-set-btn mui-btn mui-btn-link mui-pull-left">地址</button>
			</div>
			<div class="mui-col-xs-3" style="text-align: center;">
				<select class="mui-btn">
					<option value="item-0">▼市/县/区</option>
					<option value="item-1">北京市北京市北京市1</option>
					<option value="item-2">上海市</option>
					<option value="item-3">广州市</option>
					<option value="item-4">深圳市</option>
					<option value="item-5">其他</option>
				</select>
			</div>
			<div class="mui-col-xs-2">
				<select class="mui-btn">
					<option value="item-0">▼乡镇/街道</option>
					<option value="item-1">北京市北京市北京市2</option>
					<option value="item-2">上海市</option>
					<option value="item-3">广州市</option>
					<option value="item-4">深圳市</option>
					<option value="item-5">其他</option>
				</select>
			</div>
			<div class="mui-col-xs-2">
				<select class="mui-btn">
					<option value="item-0">▼村</option>
					<option value="item-1">北京市北京市北京市3</option>
					<option value="item-2">上海市</option>
					<option value="item-3">广州市</option>
					<option value="item-4">深圳市</option>
					<option value="item-5">其他</option>
				</select>
			</div>
			<div class="mui-col-xs-2">
				<select class="mui-btn">
					<option value="item-0">▼组</option>
					<option value="item-1">北京市北京市北京市4</option>
					<option value="item-2">上海市</option>
					<option value="item-3">广州市</option>
					<option value="item-4">深圳市</option>
					<option value="item-5">其他</option>
				</select>
			</div>
		</div>
		<div class="main-top-search">
			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
			<input class="mui-input-clear search-input" placeholder="请输入产品名或分类">
			<span class="mui-icon mui-icon-search"></span>
			<span class="js-addrset-swtich mui-icon mui-icon-arrowdown mui-pull-right"></span>
			<span class="js-addrset-swtich mui-icon mui-icon-arrowup mui-pull-right"></span>
		</div>
	</header>
	<div id="js-fold-space" class="scroll-fix"></div>
	    
	<div class="mui-content">
		<div class="mui-content">
			<!--
	        	推荐产品
	        -->
	        <div class="panel-title">
			  	&nbsp;&nbsp;套餐类-生日套餐商品详情
			</div>
	
			<!--
	        	描述:小图片可轮播，可放大
	        -->
			<div class="mui-content">
			    <div class="mui-slider">
			        <div class="mui-slider-group mui-slider-loop">
			        	<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
			            <div class="mui-slider-item mui-slider-item-duplicate">
			                <ul class="mui-table-view mui-grid-view">
			                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/03.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/04.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                </ul>
			            </div>
			            <div class="mui-slider-item">
			                <ul class="mui-table-view mui-grid-view">
			                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/01.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                   <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/02.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                </ul>
			            </div>
			            <div class="mui-slider-item">
			                <ul class="mui-table-view mui-grid-view">
			                   <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/03.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/04.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                </ul>
			            </div>
			            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
			            <div class="mui-slider-item mui-slider-item-duplicate">
			                <ul class="mui-table-view mui-grid-view">
			                     <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/01.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                   <li class="mui-table-view-cell mui-media mui-col-xs-6">
			                    	<p>
			      						<img src="../img/package/01/02.jpg" data-preview-src="" data-preview-group="1" />
		  							</p>
			                    </li>
			                </ul>
			            </div>
			        </div>
			    </div>
			</div>
		
        	<div class="panel-title">&nbsp;&nbsp;￥198 生日聚会套餐</div>
			<div class="mui-content-padded product-detail-info">
				品牌: 浏阳迈高烟花<br/>
				品名: 迈高生日套餐烟花<br/>
				产品安全级别: D级烟花<br/>
				适合燃放人群: 10岁以上人员燃放<br/>
				燃放区域要求: 法律许可地方均可燃放<br/>
				燃放说明:
			<p>
			1、不得在医院、敬老院、疗养院、教学、科研、学校学生宿舍和电线下面、工厂、仓库、公共场所、易燃房屋、建筑工地、草堆、易燃易爆加油站、加气站及其他重要设施附近燃放烟花爆竹。也不能在窗口、阳台、室内燃放。禁止在人民政府规定禁止燃放烟花爆竹的场所和禁止时段进行燃放。
			2、燃放前，必须仔细阅读烟花爆竹上的燃放说明，按说明方法燃放。<br/>
			3、燃放升空的烟花爆竹要注意其落地情况，如落在可燃物上，并仍有余火，应立即采取措施，将余火扑灭或将残片移走。<br/>
			4、节假日，工厂企业、高层建筑等地要关闭门窗，以防外来烟花爆竹窜入。堆置在阳台、屋顶、露天的可燃物应移往安全地带或加以遮盖和保护。<br/>
			5、不要让小孩燃放高空烟花及其他危险品种，阻止小孩从烟花爆竹中取出火药改做玩具。小孩燃放烟花爆竹时，要有大人在一旁看管指教。<br/>
			6、禁止携带烟花爆竹乘坐公共车辆等交通工具。<br/>
			7、买回家的烟花爆竹要放在安全地点，不要靠近灯火源、热源、电源，并要防止鼠咬，以防自燃、爆炸。
			</p>
			套餐内含产品详细列表:
	      	<table class="table">
	      		<thead>
		      		<tr>
		      			<th>序号</th>
		      			<th>名称</th>
		      		</tr>
	      		</thead>
	      		<tbody>
		      		<tr>
		      			<td>1</td>
		      			<td>烟花1一个</td>
		      		</tr>
		      		<tr>
		      			<td>2</td>
		      			<td>烟花2一个</td>
		      		</tr>
		      		<tr>
		      			<td>3</td>
		      			<td>烟花3一个</td>
		      		</tr>
		      		<tr>
		      			<td>1</td>
		      			<td>烟花1一个</td>
		      		</tr>
		      		<tr>
		      			<td>2</td>
		      			<td>烟花2一个</td>
		      		</tr>
		      		<tr>
		      			<td>3</td>
		      			<td>烟花3一个</td>
		      		</tr>
		      		<tr>
		      			<td>1</td>
		      			<td>烟花1一个</td>
		      		</tr>
		      		<tr>
		      			<td>2</td>
		      			<td>烟花2一个</td>
		      		</tr>
		      		<tr>
		      			<td>3</td>
		      			<td>烟花3一个</td>
		      		</tr>
	      		</tbody>
			</table>
			
			<div class="product-video-player">
		      <video class="video-js vjs-default-skin img-responsive" controls="" preload="none" width="100%" poster="../img/yanhuatu.fw.png" data-setup="{}">
		        <source src="http://oss.aliyuncs.com/fwmall-vedio/CC/71/mp4/xem003.mp4" type="video/mp4">
		      </video>     
		    </div>
			
			<img src="../img/package/01/01.jpg" style="width: 100%;"/>
		  </div>
			<div class="product-detail-floatbtns mui-row" style="bottom: 10vh;">
				<div class="mui-col-xs-5"></div>
				<div class="mui-col-xs-3"><button id="js-btn-addtocart" class="mui-btn mui-btn-success">加入购物车</button></div>
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-3"><button id="js-btn-tobuy" class="mui-btn mui-btn-danger" onclick="javascript:location.href='../mycart.html'">马上购买</button></div>
			</div>
		</div>   
    <!--
    	底部菜单栏
    -->
    <nav id="js-nav-bottom" class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" href="../index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="../mall.html">
			<span class="mui-icon mui-icon-pengyouquan"></span>
			<span class="mui-tab-label">商城</span>
		</a>
		<a class="mui-tab-item" href="../service.html">
			<span class="mui-icon mui-icon-chatboxes"></span>
			<span class="mui-tab-label">客服</span>
		</a>
		<a class="mui-tab-item" href="../mycart.html">
			<span class="mui-icon mui-icon-contact"><span class="mui-badge">9</span></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.0.0.min.js" ></script>
    <script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
    <script src="../js/index.js"></script>
    <script>
      	mui.init();
      	mui.previewImage();
    </script>
</body>
</html>